import React, { Component } from 'react'
import { Button, Modal, Select, Form, Row, Col, Input, Radio } from 'antd';


export default class index extends Component {
    state = {
        visible: false,
        confirmLoading: false,
        value: 1
    };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = () => {
        this.setState({
            confirmLoading: true,
        });
        setTimeout(() => {
            this.setState({
                visible: false,
                confirmLoading: false,
            });
        }, 2000);
    };

    handleCancel = () => {
        console.log('Clicked cancel button');
        this.setState({
            visible: false,
        });
    };

    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };

    render() {
        const { visible, confirmLoading } = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };


        return (
            <div>
                <Button type="primary" onClick={this.showModal} >添加</Button>
                <Modal
                    title="新增"
                    visible={visible}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={this.handleCancel}
                    width={1200}
                >
                    <h3>基本信息</h3>
                    <Form {...formItemLayout} layout="horizontal">
                        <Row gutter={16}>
                            <Col span={8}>
                                <Form.Item label="项目角色">
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="请选择项目角色"
                                    >
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                        <Option value="tom">Tom</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="项目角色">
                                    <Input placeholder="项目角色" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="姓名">
                                    <Input placeholder="姓名" />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16} >
                            <Col span={8}>
                                <Form.Item label="性别">
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="请选择性别"
                                    >
                                        <Option value="jack">男</Option>
                                        <Option value="lucy">女</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="所属部门">
                                    <Input placeholder="所属部门" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="专业">
                                    <Input placeholder="专业" />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16} >
                            <Col span={8}>
                                <Form.Item label="职务">
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="请选择职务"
                                    >
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                        <Option value="tom">Tom</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="职称">
                                    <Input placeholder="职称" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="联系电话">
                                    <Input placeholder="联系电话" />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16} >
                            <Col span={8}>
                                <Form.Item label="邮箱">
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="请选择邮箱"
                                    >
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                        <Option value="tom">Tom</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="邮政编码">
                                    <Input placeholder="邮政编码" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="邮政编码">
                                    <Input placeholder="邮政编码" />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16} >

                            <Col span={24}>
                                <Form.Item label="保密协议">
                                    <Input placeholder="保密协议" />
                                </Form.Item>
                            </Col>

                        </Row>



                        <h3 style={{ marginTop: "40px" }}>账号信息</h3>
                        <Row gutter={16} >
                            <Col span={8}>
                                <Form.Item label="登录账号">
                                    <Input placeholder="登录账号" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="登录密码">
                                    <Input placeholder="登录密码" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="请选择权限">
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="请选择权限"
                                    >
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                        <Option value="tom">Tom</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16} >
                            <Col span={8}>
                                <Form.Item label="状态">
                                    <Radio.Group onChange={this.onChange} value={this.state.value}>
                                        <Radio value={1}>正常</Radio>
                                        <Radio value={2}>停用</Radio>

                                    </Radio.Group>
                                </Form.Item>
                            </Col>

                        </Row>


                    </Form>

                </Modal>


            </div>
        )
    }
}
